<!-- 登录页面 -->
<template>
	<div class="loginWrap">
		<div class="login">
			<main>
				<img
					src="@/assets/image/login/login_logo.png"
					alt=""
					class="login_logo"
				/>
				<div class="login_form">
					<div class="login-wrapper">
						<div class="login-title">
							<span>欢迎登录</span>
							<img src="@/assets/image/login/login_underline.png" alt="" />
						</div>
						<el-form
							ref="formRef"
							:model="form"
							:rules="rules"
							label-width="0"
							@keyup.enter="handleLogin"
						>
							<!-- 企业编码 -->
							<el-form-item prop="enterpriseCode">
								<div class="input_wrap">
									<img src="@/assets/image/login/company.png" alt="" />
									<el-input
										v-model="form.enterpriseCode"
										placeholder="请输入企业编码"
										size="large"
										clearable
									/>
								</div>
							</el-form-item>

							<!-- 手机号 -->
							<el-form-item prop="mobile">
								<div class="input_wrap">
									<img src="@/assets/image/login/phone.png" alt="" />
									<el-input
										v-model="form.loginMobile"
										placeholder="请输入手机号"
										size="large"
										clearable
									/>
								</div>
							</el-form-item>

							<!-- 密码 -->
							<el-form-item prop="password">
								<div class="input_wrap">
									<img src="@/assets/image/login/password.png" alt="" />
									<el-input
										v-model="form.password"
										type="password"
										placeholder="请输入密码"
										size="large"
										show-password
										clearable
									/>
								</div>
							</el-form-item>

							<!-- 记住我 & 忘记密码 -->
							<div class="login-options">
								<el-checkbox v-model="form.remember">记住我</el-checkbox>
								<el-link type="primary" :underline="false" class="forgetPwd"
									>忘记密码？</el-link
								>
							</div>

							<!-- 登录按钮 -->
							<el-button
								type="primary"
								size="large"
								class="login_btn"
								:loading="loading"
								@click="handleLogin"
							>
								登 录
							</el-button>

							<!-- 服务协议 -->
							<el-form-item prop="agree">
								<div class="login-agree">
									<el-checkbox
										v-model="form.agree"
										class="checkbox"
										color="#006D7A"
									/>
									<div class="agree">
										<span>我已阅读并同意</span>

										<el-link type="primary" :underline="false" class="link"
											>《服务协议》</el-link
										>
										<span> 及 </span>

										<el-link type="primary" :underline="false" class="link"
											>《隐私政策》</el-link
										>
									</div>
								</div>
							</el-form-item>
						</el-form>
					</div>
				</div>
			</main>
		</div>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { userLoginAPI } from '@/api/user'
import { useRouter } from 'vue-router'
import { tokenStorage, userStorage } from '@/utils/storage'
import { ElMessage } from 'element-plus'
import {
	getEnterpriseById,
	getDepartmentsById,
	getRoleList,
} from '@/api/company'
const $router = useRouter()
interface LoginForm {
	enterpriseCode: string
	loginMobile: string
	password: string
	remember: boolean
	agree: boolean
}

const formRef = ref<FormInstance>()
const loading = ref(false)
const form = reactive<LoginForm>({
	enterpriseCode: import.meta.env?.VITE_LOGIN_ACCOUNT,
	loginMobile: import.meta.env?.VITE_LOGIN_MOBILE,
	password: import.meta.env?.VITE_LOGIN_PASSWORD,
	remember: false,
	agree: false,
})

const rules: FormRules<LoginForm> = {
	enterpriseCode: [
		{ required: true, message: '请输入企业编码', trigger: 'blur' },
	],
	loginMobile: [
		{ required: true, message: '请输入手机号', trigger: 'blur' },
		{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误', trigger: 'blur' },
	],
	password: [
		{ required: true, message: '请输入密码', trigger: 'blur' },
		{
			pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/,
			message: '密码格式不正确',
			trigger: 'blur',
		},
	],
	agree: [
		{
			validator: (_, value, cb) =>
				value ? cb() : cb(new Error('请阅读并同意相关协议')),
			trigger: 'change',
		},
	],
}

const handleLogin = () => {
	formRef.value?.validate(async (valid) => {
		if (!valid) return
		loading.value = true
		// 这里调登录接口
		try {
			const {
				code,
				data: res,
				message,
			} = await userLoginAPI({
				enterpriseCode: form.enterpriseCode,
				loginMobile: form.loginMobile,
				password: form.password,
			})
			if (code === 200) {
				// 登录成功
				tokenStorage.set(res.token)
				userStorage.set(res.employee)
				loading.value = false
				ElMessage.success(message)
				$router.replace('/')
				getDepartmentList()
				getDepartmentGroupList()
				getRoleListApi()
			} else {
				// 登录失败
				loading.value = false
				ElMessage.error(message)
			}
		} catch (error) {
			loading.value = false
		}
	})
}
const getDepartmentList = async () => {
	try {
		const { enterpriseId } = userStorage.get()
		const { code, data: res } = await getEnterpriseById(enterpriseId)
		if (code === 200) {
			const list = res
				? (res as Array<any>)
				: [
						{
							label: '全部部门',
							value: '',
						},
				  ]
			if (list) {
				const newList = list.map((item) => {
					return {
						label: item.departmentName,
						value: item.id,
					}
				})
				newList.unshift({
					label: '全部部门',
					value: '',
				})
				window.localStorage.setItem('departmentList', JSON.stringify(newList))
			}
		}
	} catch (error) {
		return Promise.reject(error)
	}
}
const getDepartmentGroupList = async () => {
	const { enterpriseId } = userStorage.get()
	try {
		const { code, data: res } = await getDepartmentsById(enterpriseId)
		if (code == 200) {
			if (code === 200) {
				const list = res
					? (res as Array<any>)
					: [
							{
								label: '部门分组',
								value: '',
							},
					  ]
				if (list) {
					const newList = list.map((item) => {
						return {
							label: item.departmentGroupName,
							value: item.id,
						}
					})
					newList.unshift({
						label: '部门分组',
						value: '',
					})
					window.localStorage.setItem('groupList', JSON.stringify(newList))
				}
			}
		} else {
		}
	} catch (error) {
		return Promise.reject(error)
	}
}
const getRoleListApi = async () => {
	const { code, data: res } = await getRoleList()
	if (code === 200) {
		const newList = res.map((val) => {
			return {
				label: val.name,
				value: val.id,
			}
		})
		window.localStorage.setItem('roleList', JSON.stringify(newList))
	}
}
</script>

<style scoped lang="less">
.loginWrap {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.login {
	font-family: Roboto, Roboto;
	background: url('@/assets/image/bg/login_bg.png') no-repeat center;
	background-size: cover;
	width: 100%;
	height: 100%;
	main {
		width: 100vw;
		height: 100%;
		position: relative;
		.login_logo {
			position: absolute;
			left: 50px;
			top: 50px;
			width: 135px;
			height: 40.05px;
		}
		.login_form {
			display: flex;
			align-items: center;
			background: #f4f6f8;
			position: absolute;
			right: 0;
			top: 0;
			height: 100%;
			width: 544px;
			padding: 0 72px;
			.login-wrapper {
				width: 100%;
				.login-title {
					position: relative;
					margin-bottom: 60px;
					span {
						position: relative;
						font-weight: 600;
						font-size: 32px;
						color: #000000;
						z-index: 9;
					}
					> img {
						position: absolute;
						bottom: -1px;
						content: '';
						display: block;
						width: 137px;
						height: 10px;
					}
				}

				.login-options {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 30px 0;
					color: #000000;
					font-size: 14px;
					.forgetPwd {
						color: #006d7a;
					}
				}
				.login-agree {
					display: flex;
					align-items: center;
					font-size: 14px;
					margin-top: 20px;
					color: #000000;
					.checkbox {
						margin-right: 10px;
					}
					.link {
						color: #006d7a;
					}
					.agree {
						display: flex;
						align-items: center;
					}
				}
				.login_btn {
					width: 100%;
					height: 56px;
					background: #006d7a;
					border-radius: 50px 50px 50px 50px;
					font-weight: 500;
					font-size: 20px;
					color: #ffffff;
					border: none;
				}
			}
		}
	}
	.input_wrap {
		display: flex;
		width: 100%;
		height: 56px;
		background: #ffffff;
		border-radius: 50px 50px 50px 50px;
		border: 1px solid #d9d9d9;
		display: flex;
		align-items: center;
		padding: 0 20px;
		> img {
			width: 24px;
			height: 24px;
		}
	}
}
:deep(.el-input--large) {
	font-size: 16px;
	border: none;
	box-shadow: none;
}
:deep(.el-input__inner) {
	font-size: 16px;
}
:deep(.el-input__wrapper) {
	border: none;
	box-shadow: none !important;
}
:deep(.el-input) {
	border: none;
	box-shadow: none;
}
/* 勾选图标 */
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
	background-color: #006d7a;
	border-color: #006d7a;
}
:deep(.el-checkbox__inner:hover) {
	border-color: #006d7a;
}
:deep(/* 勾选后 label 文字高亮 */
.el-checkbox__input.is-checked + .el-checkbox__label ) {
	color: #000000;
}
:deep(.el-checkbox__label) {
	color: #000000;
}
:deep(.el-form-item) {
	margin-bottom: 30px;
}
</style>
